<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cramped elements</title>
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup">
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac">
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#radicals-msqrt-mroot">
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#displaystyle-and-scriptlevel-in-scripts">
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#user-agent-stylesheet">
<meta name="assert" content="Verify default calculation of math-shift on MathML elements">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/box-navigation.js"></script>
<style>
  math {
      font-family: superscriptshiftupcramped5000;
  }
  math, math * {
      font-size: 10px;
      background: lightyellow;
  }
  @font-face {
    font-family: superscriptshiftupcramped5000;
    src: url("/fonts/math/scripts-superscriptshiftupcramped5000.woff");
  }
  .testedElement *:first-child {
      background: lightblue;
  }
  .testedElement *:last-child {
      background: pink;
  }
</style>
<script>
  function assert_cramped(id, expected, name) {
      const emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
      const superscriptshiftupcramped = 5000 * emToPx;
      var container = document.getElementById(id);
      var msup = container.getElementsByClassName("testedElement")[0];
      var base = firstInFlowChild(msup);
      var script = nextInFlowSibling(base);
      var shift = base.getBoundingClientRect().bottom - script.getBoundingClientRect().bottom;
      if (expected)
          assert_greater_than(shift, superscriptshiftupcramped / 2, `${name || id} should be cramped`);
      else
          assert_less_than(shift, superscriptshiftupcramped / 2, `${name || id} should not be cramped`);
  }

  setup({ explicit_done: true });
  window.addEventListener("load", () => { document.fonts.ready.then(runTests); });

  function runTests() {
      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("math-001", false);
          assert_cramped("mrow-001", false, "mrow");
      }, "child of non-cramped element");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("mrow-002", true);
      }, "child of cramped element");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("msqrt-001", true);
      }, "child of msqrt");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("mroot-001", true);
      }, "child of mroot");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("mfrac-001", false, "numerator");
          assert_cramped("mfrac-002", true, "denominator");
      }, "child of mfrac");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("msub-001", false, "base");
          assert_cramped("msub-002", true, "subscript");
      }, "child of msub");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("msup-001", false, "base");
          assert_cramped("msup-002", false, "superscript");
      }, "child of msup");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("msubsup-001", false, "base");
          assert_cramped("msubsup-002", true, "subscript");
          assert_cramped("msubsup-003", false, "superscript");
      }, "child of msubsup");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("munder-001", false, "base");
          assert_cramped("munder-002", false, "underscript");
      }, "child of munder");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("mover-001", false, "base");
          assert_cramped("mover-002", false, "overscript");
      }, "child of mover (non-accent overscript)");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("munderover-001", false, "base");
          assert_cramped("munderover-002", false, "underscript");
          assert_cramped("munderover-003", false, "overscript");
      }, "child of munderover (non-accent overscript)");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("mover-003", true, "base");
          assert_cramped("mover-004", false, "overscript");
      }, "accent child of mover (accent overscript)");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("munderover-004", true, "base");
          assert_cramped("munderover-005", false, "underscript");
          assert_cramped("munderover-006", false, "overscript");
      }, "accent child of munderover (accent overscript)");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("mmultiscripts-001", false, "base");
          assert_cramped("mmultiscripts-002", true, "post-subscript");
          assert_cramped("mmultiscripts-003", false, "post-superscript");
          assert_cramped("mmultiscripts-004", true, "pre-subscript");
          assert_cramped("mmultiscripts-005", false, "post-superscript");
      }, "mmultiscripts");

      test(function() {
          assert_true(MathMLFeatureDetection.has_mspace());
          assert_cramped("css-001", false);
          assert_cramped("css-002", true);
          assert_cramped("css-003", true);
          assert_cramped("css-004", false);
      }, "element with specified CSS math-style");

      done();
  }
</script>
</head>
<body>
  <div id="log"></div>
  <p>
    <math id="math-001">
      <msup class="testedElement">
        <mspace height="2em" width="2em"/>
        <mspace height="1em" width="1em"/>
      </msup>
    </math>
    <math>
      <mrow id="mrow-001">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </mrow>
    </math>
  </p>
  <p>
    <math>
      <msqrt>
        <!-- This is a child of a msqrt so it is cramped. As a consequence,
             all its descendants are cramped too. -->
        <munderover>
          <mover>
            <munder>
              <msubsup>
                <msup>
                  <msub>
                    <mfrac>
                      <mrow id="mrow-002">
                        <msup class="testedElement">
                          <mspace height="2em" width="2em"/>
                          <mspace height="1em" width="1em"/>
                        </msup>
                      </mrow>
                      <mspace/>
                    </mfrac>
                    <mspace/>
                  </msub>
                  <mspace/>
                </msup>
                <mspace/>
                <mspace/>
              </msubsup>
              <mspace/>
            </munder>
            <mspace/>
          </mover>
          <mspace/>
          <mspace/>
        </munderover>
      </msqrt>
    </math>
  </p>
  <p>
    <math>
      <msqrt id="msqrt-001">
        <mn>0</mn>
        <mn>1</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>3</mn>
        <mn>4</mn>
      </msqrt>
    </math>
  </p>
  <p>
    <math>
      <mroot id="mroot-001">
        <mn>0</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </mroot>
    </math>
  </p>
  <p>
    <math>
      <mroot id="mroot-002">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
      </mroot>
    </math>
  </p>
  <p>
    <math>
      <mfrac id="mfrac-001">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
      </mfrac>
    </math>
  </p>
  <p>
    <math>
      <mfrac id="mfrac-002">
        <mn>0</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </mfrac>
    </math>
  </p>
  <p>
    <math>
      <msub id="msub-001">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
      </msub>
    </math>
  </p>
  <p>
    <math>
      <msub id="msub-002">
        <mn>0</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </msub>
    </math>
  </p>
  <p>
    <math>
      <msup id="msup-001">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
      </msup>
    </math>
  </p>
  <p>
    <math>
      <msup id="msup-002">
        <mn>0</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </msup>
    </math>
  </p>
  <p>
    <math>
      <msubsup id="msubsup-001">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
        <mn>2</mn>
      </msubsup>
    </math>
  </p>
  <p>
    <math>
      <msubsup id="msubsup-002">
        <mn>0</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>2</mn>
      </msubsup>
    </math>
  </p>
  <p>
    <math>
      <msubsup id="msubsup-003">
        <mn>0</mn>
        <mn>1</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </msubsup>
    </math>
  </p>
  <p>
    <math>
      <munder id="munder-001">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
      </munder>
    </math>
  </p>
  <p>
    <math>
      <munder id="munder-002">
        <mn>0</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </munder>
    </math>
  </p>
  <p>
    <math>
      <mover id="mover-001">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
      </mover>
    </math>
  </p>
  <p>
    <math>
      <mover id="mover-002">
        <mn>0</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </mover>
    </math>
  </p>
  <p>
    <math>
      <mover accent="true" id="mover-003">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
      </mover>
    </math>
  </p>
  <p>
    <math>
      <mover accent="true" id="mover-004">
        <mn>0</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </mover>
    </math>
  </p>
  <p>
    <math>
      <munderover id="munderover-001">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
        <mn>2</mn>
      </munderover>
    </math>
  </p>
  <p>
    <math>
      <munderover id="munderover-002">
        <mn>0</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>2</mn>
      </munderover>
    </math>
  </p>
  <p>
    <math>
      <munderover id="munderover-003">
        <mn>0</mn>
        <mn>1</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </munderover>
    </math>
  </p>
  <p>
    <math>
      <munderover accent="true" id="munderover-004">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
        <mn>2</mn>
      </munderover>
    </math>
  </p>
  <p>
    <math>
      <munderover accent="true" id="munderover-005">
        <mn>0</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>2</mn>
      </munderover>
    </math>
  </p>
  <p>
    <math>
      <munderover accent="true" id="munderover-006">
        <mn>0</mn>
        <mn>1</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
      </munderover>
    </math>
  </p>
  <p>
    <math>
      <mmultiscripts id="mmultiscripts-001">
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>1</mn>
        <mn>2</mn>
        <mn>3</mn>
        <mn>4</mn>
        <mn>5</mn>
        <mn>6</mn>
        <mprescripts/>
        <mn>7</mn>
        <mn>8</mn>
        <mn>9</mn>
        <mn>10</mn>
        <mn>11</mn>
        <mn>12</mn>
      </mmultiscripts>
    </math>
  </p>
  <p>
    <math>
      <mmultiscripts id="mmultiscripts-002">
        <mn>0</mn>
        <mn>1</mn>
        <mn>2</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>4</mn>
        <mn>5</mn>
        <mn>6</mn>
        <mprescripts/>
        <mn>7</mn>
        <mn>8</mn>
        <mn>9</mn>
        <mn>10</mn>
        <mn>11</mn>
        <mn>12</mn>
      </mmultiscripts>
    </math>
  </p>
  <p>
    <math>
      <mmultiscripts id="mmultiscripts-003">
        <mn>0</mn>
        <mn>1</mn>
        <mn>2</mn>
        <mn>3</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>5</mn>
        <mn>6</mn>
        <mprescripts/>
        <mn>7</mn>
        <mn>8</mn>
        <mn>9</mn>
        <mn>10</mn>
        <mn>11</mn>
        <mn>12</mn>
      </mmultiscripts>
    </math>
  </p>
  <p>
    <math>
      <mmultiscripts id="mmultiscripts-004">
        <mn>0</mn>
        <mn>1</mn>
        <mn>2</mn>
        <mn>3</mn>
        <mn>4</mn>
        <mn>5</mn>
        <mn>6</mn>
        <mprescripts/>
        <mn>7</mn>
        <mn>8</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>10</mn>
        <mn>11</mn>
        <mn>12</mn>
      </mmultiscripts>
    </math>
  </p>
  <p>
    <math>
      <mmultiscripts id="mmultiscripts-005">
        <mn>0</mn>
        <mn>1</mn>
        <mn>2</mn>
        <mn>3</mn>
        <mn>4</mn>
        <mn>5</mn>
        <mn>6</mn>
        <mprescripts/>
        <mn>7</mn>
        <mn>8</mn>
        <mn>9</mn>
        <msup class="testedElement">
          <mspace height="2em" width="2em"/>
          <mspace height="1em" width="1em"/>
        </msup>
        <mn>11</mn>
        <mn>12</mn>
      </mmultiscripts>
    </math>
  </p>
  <p>
    <math id="css-001" style="math-shift: normal">
      <msup class="testedElement">
        <mspace height="2em" width="2em"/>
        <mspace height="1em" width="1em"/>
      </msup>
    </math>
    <math id="css-002" style="math-shift: compact">
      <msup class="testedElement">
        <mspace height="2em" width="2em"/>
        <mspace height="1em" width="1em"/>
      </msup>
    </math>
    <math id="css-003" style="math-shift: normal">
      <msup class="testedElement" style="math-shift: compact">
        <mspace height="2em" width="2em"/>
        <mspace height="1em" width="1em"/>
      </msup>
    </math>
    <math id="css-004" style="math-shift: compact">
      <msup class="testedElement" style="math-shift: normal">
        <mspace height="2em" width="2em"/>
        <mspace height="1em" width="1em"/>
      </msup>
    </math>
  </p>
</body>
</html>
